<template>
    
        <div class="login">
            <!--插入全局背景图片-->
            <img src="~@/assets/登录2.jpg" width="100%" height="100%" alt="">
            <!--<div id="beijing"></div>-->
            <form class="form-box">
                <h3>登录</h3>
                <div class="g">
                    <p >用户名</p>
                    <label><input type="text" id="username" placeholder="请输入用户名" v-model="username" class="i"></label>
                    <p >密码</p>
                    <label><input type="password" id="password" placeholder="请输入密码" v-model="password" class="i"></label>
                   <div class="f">
                    <p></p>
                    <input type="checkbox" class="aa" checked="checked" />记住我
                    </div>
                    <p></p>
                    <a>
                        <!--<router-link to="/zuce"></router-link>-->
                            <button type="button" class="w" @click="login">登录</button>
                            <p></p>
                            <button type="button" class="w" @click="show">注册</button>
                        
                    </a>
                    <router-view></router-view>
                   <!-- <a href="Javascript:void(0);"><input type="submit" class="w" value="登录" v-model="login"/></a>-->
                </div>
            </form>

        </div>
    
        
    
</template>


<script>
//局部导入axios,但本次使用全局导入
import router from '@/router';
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup(){
    const username = ref('');
    const password = ref('');
    //const login = ref(false);
    const router = useRouter();
    const login = () => {
        console.log(111);
        //访问后台json数据进行验证
        axios.get('/public/pwd.json')
           .then(res => {
                console.log(res.data);
                //条件语句进行判断
                if (
                    res.data.username == username.value &&
                    res.data.password == password.value
                ) {
                    //点击事件进行跳转
                    router.push({
                        path: '/zuye'
                    });
                } else {
                    alert('用户名或密码错误');
                }
            });
    };
    const show = () => {
        router.push({
            path: '/zuce'
        });
    };
    return {
        username,
        password,
        login,
        show
    };
}
}

/*
export default {
    data:function() {
        return {
            username: '',
            password: ''
            
        }
    },
    methods: {
        login: function() {
           
            console.log(111);
            
        //访问后台json数据进行验证
           this.$axios.get('/public/pwd.json')
            .then(res => {
             console.log(res.data);
             //条件语句进行判断
             if(
                res.data.username==this.username &&
                res.data.password==this.password
             ){
                 //点击事件进行跳转
                 this.$router.push({
                     path: '/zuye'
                 });
             }else{
                 alert('用户名或密码错误');
             }
         });
         //点击注册按钮跳转到注册页面
            
              /*get请求
        axios({
            method: 'get',
            url: 'http://iwenwiki.com/api/blueberrypai/login.php'
        }).then(res => {
           // this.chengpin = res.data.chengpinDetails[0]
           console.log(res.data);
        })
        //post请求
        axios({ 
            method: 'post',
            url: 'http://iwenwiki.com/api/blueberrypai/login.php',
            data:querystring.stringify( {
                user_id: 'iwen@qq.com',
                password: 'iwen123',
                verification_code: 'crfvw'
            })
        }).then(res => {
            console.log(res.data);
        })*/
       //快捷方式
        //this.get('http://iwenwiki.com/api/blueberrypai/login.php').then(res => {
           // console.log(res.data);
      //  });
        //post请求全局方式,要传递参数
        //this.$axios.post('http://iwenwiki.com/api/blueberrypai/login.php',querystring.stringify( {
            //user_id: 'iwen@qq.com',
           // password: 'iwen123',
          //  verification_code: 'crfvw'
      //  })).then(res => {
         //   console.log(res.data);
       // });
        
        //注册按钮跳转到注册页面
        
         /*   show: function() {
                this.$router.push({
                    path: '/zuce'
                });
            }
    },
    created(){
        console.log('创建完毕')
    },
    beforeCreate(){

        console.log('创建前')
    }     
}*/

</script>

<style>
/*#beijing{
    width: 100%;
    height: 100%;
    background-image: url('~@/assets/登录2.jpg');
    background-size: cover;

}*/
.form-box{
    padding:40px;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    /*设置背景透明度*/
    opacity: 0.8;
    
    text-align: center;
    border-radius: 10px;
}


.aa{
    text-align: left;
    margin-right: 10px;
}
.w{
    width: 300px;
    height: 30px;
    background-color: #27b3e7;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

p{
    text-align: left;
    font-size: 10px;

}
.f{
    color: rgb(43, 219, 242);
    
    text-align: left;
}
.i{
    width: 300px;
    height: 25px;
    background-color: #ccd5d9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>